<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tab选项卡</title>
  <style>
    .container{
      max-width: 800px;
      padding: 20px;
      margin: 30px auto 0;
      border-radius: 4px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, .3);
    }
    .tabs h2{
      margin: 10px 0;
    }
    .tabs .tab-head{
      display: flex;
      font-size: 14px;
      line-height: 30px;
      color: #6c6c6c;
      border-bottom: 2px solid #d3d3d3;
      position: relative;
    }
    .tabs .tab-item{
      margin: 0 13px;
      cursor: pointer;
    }
    .tabs .tab-item:first-child{
      margin-left: 0px;
    }
    .tabs .tab-item.active{
      color:#409eff;
      /* border-bottom: 2px solid #409eff;
      margin-bottom: -2px; */
    }
    .tabs .line{
      position: absolute;
      top: 100%;
      height: 2px;
      background-color: #409eff;
      transition: all .3s;
    }
    .tabs .tab-panel{
      padding: 20px 0;
      display: none;
    }
    .tabs .tab-panel.active{
      display: block;
    }
    @media screen and (min-width: 600px){
      .pages{
        display: flex;
        justify-content:space-between;
      }
    }

    @media screen and (max-width: 600px){
      .pages{
        display: flex;
        flex-direction: column;
      }
      .pages div:first-child{
        padding-bottom: 6px;
      }
    }
    .pages a{
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="container pages">
    <div>上一个:<a href="../Message/Message.html">Message（消息提示）</a></div>
    <div>下一个:<a href="../tooltip/tooltip.html">tooltip（文字提示）</a></div>
  </div>
  <div class="container">
    <div class="tabs">
      <h2>选项卡</h2>
      <div class="tab-head">
        <span class="tab-item active">用户管理</span>
        <span class="tab-item">配置管理</span>
        <span class="tab-item">角色管理</span>
        <span class="tab-item">定时任务补偿</span>
        <span class="line"></span>
      </div>
      <div class="tab-content">
        <div class="tab-panel active">用户管理</div>
        <div class="tab-panel">配置管理</div>
        <div class="tab-panel">角色管理</div>
        <div class="tab-panel">定时任务补偿</div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="tabs">
      <h2>选项卡</h2>
      <div class="tab-head">
        <span class="tab-item active">用户管理</span>
        <span class="tab-item">配置管理</span>
        <span class="tab-item">角色管理</span>
        <span class="tab-item">定时任务补偿</span>
        <span class="line"></span>
      </div>
      <div class="tab-content">
        <div class="tab-panel active">用户管理</div>
        <div class="tab-panel">配置管理</div>
        <div class="tab-panel">角色管理</div>
        <div class="tab-panel">定时任务补偿</div>
      </div>
    </div>
  </div>

  <script>
    const $ = str => document.querySelector(str)
    const $$ = str => document.querySelectorAll(str)
    
    class Tabs{
      constructor($container){
        this.$container = $container
        this.$$tabItems = $container.querySelectorAll('.tab-item')
        this.$$tabPanels =  $container.querySelectorAll('.tab-panel')
        this.$line = $container.querySelector('.line')
        this.$activeItem = $container.querySelector('.tab-item.active')
  
        this.init()
        this.bind()
      }
  
      init(){
        this.$line.style.width = this.$activeItem.offsetWidth + 'px'
        this.$line.style.transform = `translateX(${this.$activeItem.offsetLeft}px)`
      }
      bind(){
        let _this = this
        this.$$tabItems.forEach($tab => {
          $tab.onclick = function(){
            _this.$$tabItems.forEach($tab => $tab.classList.remove('active'))
            this.classList.add('active')
  
            _this.$line.style.width = this.offsetWidth + 'px'
            _this.$line.style.transform = `translateX(${this.offsetLeft}px)`
  
            _this.$$tabPanels.forEach($panel => $panel.classList.remove('active'))
            _this.$$tabPanels[[..._this.$$tabItems].indexOf($tab)].classList.add('active')
          }
  
        });
      }
    }
  
    document.querySelectorAll('.tabs').forEach($container => new Tabs($container))
  
  </script>
</body>
</html>